博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序wx.previewImage实用案例(交流QQ群:604788754)
阅读量:6294 次
发布时间:2019-06-22

本文共 831 字,大约阅读时间需要 2 分钟。

本案例是可以滑动预览多张图片效果。(本案例在本地配置好之后,请扫描二维码到手机滑动预览。在开发者工具上预览,滑动不是很流畅)

图片必须选择远程图片,本地图片无法实现预览。

或是通过wx.chooseImage上传的图片数组。

微信开发者工具:0.18.182200

欢迎对小程序开发有兴趣的朋友加群(604788754)交流学习。

WXML:

WXSS:

.wrap{  width: 100px;  height: 100px;  float: left;  margin-right: 15px;}.wramimg{    width: 100px;  height: 100px;}

JS:

Page({  data: {    pictures: [      'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',      'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',      'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg'    ]  },  previewImage: function (e) {    var index = e.currentTarget.dataset.index;    var pictures = this.data.pictures;    wx.previewImage({      current: pictures[index],      urls: pictures    })  }})

预览前效果:

在手机端预览后效果:

转载地址:http://ajkta.baihongyu.com/

你可能感兴趣的文章
子网划分
查看>>
BZOJ 2186 [Sdoi2008]沙拉公主的困惑
查看>>
Django之windows平台篇
查看>>
诸葛io接口调用学习
查看>>
设计模式(九)——代理模式
查看>>
make: *** No targets specified and no makefile found. Stop.错误
查看>>
使用emacs作为代码片段管理工具
查看>>
vim vi IMPROVED
查看>>
3D视觉原理之深度暗示(即立体感)
查看>>
简单排序算法:冒泡法排序(Java)
查看>>
部署docker容器虚拟化平台
查看>>
为什么现代企业无法真正实现组合式监控?
查看>>
HMAC 算法
查看>>
DNS
查看>>
mysql基础
查看>>
原生JS轻松实现倒计时功能
查看>>
『中级篇』docker之CI/CD持续集成-gitlab安装(70)
查看>>
nginx的301与302如何配置
查看>>
Jquery插件开发
查看>>
【软件周刊第 28 期】微软推出 Visual Studio for Mac 正式版;Spring Framework 5.0 首个候选版本发布:为 JDK 9 做准备...
查看>>